<template>
    <div>
        <div class="top">
            <div class="img">
                <image src="/static/images/userIcon/ad/ad2@2x.webp" mode="" />
            </div>
            <div class="desc">
                <p>用广告引流</p>
                <span>创建广告->加入文章/视频->推广引流</span>
            </div>
        </div>

        <div class="ad_type_list">
            <div class="ad_type_item" @click="$navigate.to('/pages/advert/adList?type=mini')">
                <p>小程序广告</p>
                <div class="ad_des">
                    <span>直达小程序</span>
                    <span>商品详情页</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/mini.png" mode="" />
                </div>
            </div>
            <div class="ad_type_item" @click="$navigate.to('/pages/advert/adList?type=link')">
                <p>链接广告</p>
                <div class="ad_des">
                    <span>官网/微官网</span>
                    <span>H5链接</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/store_link.webp" mode="" />
                </div>
            </div>
            <div class="ad_type_item" @click="$navigate.to('/pages/advert/adList?type=product')">
                <p>商品广告</p>
                <div class="ad_des">
                    <span>淘宝/京东/抖音</span>
                    <span>/拼多多</span>
                    <span>复制商品链接</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/shop2x.webp" mode="" />
                </div>
            </div>
            <div class="ad_type_item" @click="$navigate.to('/pages/advert/adList?type=img')">
                <p>图片广告</p>
                <div class="ad_des">
                    <span>公众号/小程序码</span>
                    <span>微信/群二维码</span>
                    <span>海报/其它</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/poster-Ad.webp" mode="" />
                </div>
            </div>
            

        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
    .top{
        width: 100%;
        height: 160rpx;
        background: #fff;
        .align(v-center);
        .img{
            width: 160rpx;
            height: 160rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .desc{
            p{
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 15rpx;
            }
            span{
                font-size: 28rpx;
                color: #666;

            }
        }
    }
    .ad_type_list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 30rpx;
        .ad_type_item{
            width: 330rpx;
            height: 230rpx;
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 30rpx;
            box-shadow: 0 0 10rpx #e5e5e5;
            padding: 30rpx;
            position: relative;
            display: flex;
            flex-direction: column;
            p{
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 20rpx;
            }
            .ad_des{
                flex: 1;
                width: 100%;
                padding-right: 70rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                span{
                    color: #999;
                    font-size: 28rpx;
                }
            }
            .icon{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                position: absolute;
                right: 20rpx;
                bottom: 20rpx;
                .align(center);
                image{
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            &:nth-child(1) .icon {
                .gradient(#f44711,#ff9474, 180deg);
            }
            &:nth-child(2) .icon {
                .gradient(#406dfa,#7f9cf5, 180deg);
            }
            &:nth-child(3) .icon {
                .gradient(#ffa64d,#fccf67, 180deg);
            }
            &:nth-child(4) .icon {
                .gradient(#07c160,#72f1af, 180deg);
            }
        }
    }
</style>